<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css" type="text/css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						var username_b = false;
						var password_b = false;
						var usertel_b = false;
						$("#username")
								.blur(
										function() {
											var username = $("#username").val();
											if (username == ""
													|| username == null
													|| (username.length<6||username.length>9)) {
												$("#usernameMsg").html(
														"用户名不符合规范").css(
														"color", "red");
												username_b = false;
											}
										});

						$("#username").focus(
								function() {
									$("#usernameMsg").html("输入6-9位的用户名").css(
											"color", "black");
									username_b = true;
								});

						$("#password")
								.blur(
										function() {
											var password = $("#password").val();
											if (password == ""
													|| password == null
													|| (password.length<6||password.length>16)) {
												$("#passwordMsg").html(
														"密码不符合规范").css("color",
														"red");
												password_b = false;
											}
										});

						$("#password").focus(
								function() {
									$("#passwordMsg").html("输入6-16位的密码").css(
											"color", "black");
									password_b = true;
								});

						$("#usertel").blur(
								function() {
									var tel = $("#usertel").val();
									if (tel.length != 11) {
										$("#telMsg").html("手机号不符合规范").css(
												"color", "red");
										usertel_b = false;
									}
								});

						$("#usertel").focus(
								function() {
									$("#telMsg").html("输入11位的手机号").css("color",
											"black");
									usertel_b = true;
								});
						$("#btn-1").click(function() {
							if (username_b && password_b && usertel_b) {
								return true;
							} else {
								alert("请输入正确信息");
								return false;
							}
						})
					});
</script>
<%@include file="head.jsp"%>
</head>

<body class="main">
	<!-- 顶部 -->
	<div id="register-form" style="margin-top: 110px">
		<form action="${pageContext.request.contextPath}/register"
			method="post" onsubmit="return checkForm();">
			<table style="margin: auto;">
				<tr style="vertical-align: middle">
					<td><h1>注册</h1>
						<table>
							<tr>
								<td>用户名:</td>
								<td><input type="text" id="username" name="username"></td>
								<td><span id="usernameMsg">输入6-9位的用户名</span></td>
							</tr>
							<tr style="height: 10px"></tr>
							<tr>
								<td>密&nbsp;&nbsp;码:</td>
								<td><input type="password" id="password" name="password""></td>
								<td><span id="passwordMsg">输入6-16位的密码</span></td>
							</tr>
							<tr style="height: 10px"></tr>
							<tr>
								<td>手机号:</td>
								<td><input type="text" id="usertel" name="usertel"></td>
								<td><span id="telMsg">输入11位的手机号</span></td>
							</tr>
							<tr style="height: 10px"></tr>
							<tr>
								<td>性别:</td>
								<td><input type="radio" id="sex1" name="gender" value="男">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" id="sex2" name="gender" value="女">女</td>
							</tr>
							<tr style="height: 10px"></tr>
						</table>
						<table style="width: 350px">
							<tr style="height: 10px"></tr>
							<tr>
								<td><input type="submit" id="btn-1" value="注册"></td>
							</tr>
							<tr>
								<td><br /></td>
							</tr>
						</table></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>